<template>
	<view class="mar-b-10 page">
		<view class="container">
			<top-search></top-search>
			<!-- 轮播图 -->
			<view class="banner-box mar-t-12">
				<swiper
					class="banner"
					indicator-color="#d5d5d5"
					indicator-active-color="#ffffff"
					:indicator-dots="true"
					:autoplay="autoplay"
					:interval="interval"
					:duration="duration"
				>
					<swiper-item class=" flex-column flex-1" v-for="(item,index) in banners" :key="index" @click="previewImage(banners,index)">
						<image  class="banner-item " :src="item.image" mode="scaleToFill" lazy-load='true'></image>
					</swiper-item>
					
				</swiper>
			</view>
		</view>
		<!-- 轮播图结束 -->
		<!-- 分类 -->
		<block v-if="cate_list">
			<scroll-view
				class="tab-bar bac-color-fff mar-t-3"
				:scroll="false"
				:scroll-x="true"
				:show-scrollbar="false"
				
			>
				<view class="flex-column align-end">
					<view class="flex-row pad-10">
						<view
							class="uni-tab-item"
							v-for="(item,index) in cate_list"
							:key="index"
							@click="setIndex(index)"
						>
							<text class="uni-tab-item-title font-size-15" :class="{active:index==current_index}">{{item.name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 分类结束 -->

			<!-- 二级分类 -->
			<scroll-view
				class="tab-bar bac-color-fff mar-t-3"
				:scroll="false"
				:scroll-x="true"
				:show-scrollbar="false"
				v-if="cate_list[current_index].list"
			>
				<view class="flex-column align-end">
					<view class="flex-row pad-10">

						<view
							class="uni-tab-item"
							v-for="(item,index) in cate_list[current_index].list"
							:key="index"
							@click="setSecondIndex(index)"
						>
							<text class="uni-tab-item-title" :class="{active:index==second_index}">{{item.name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 二级分类结束 -->
		</block> 
		<view class="container">
			<article-list :range="list"></article-list>
			<no-more v-if="index_page >= total_page"></no-more>
		</view>
		
	</view>
</template>

<script>
import topSearch from '@/components/top-search'
import articleList from '@/components/article-list'
import { getBanners, getEduList,eduCate } from '@/utils/http'
export default {
	data() {
		return {
			autoplay: true,
			interval: 6000,
			duration: 500,
			banners: '',
			index_page: 0,
			total_page: 1,
			list: [],
			current_index:0,
			second_index:0,
			cate_list:[
				{id:0,name:'全部'},
			],
			current_cate_id:0,
			bannerImgs:[]
		}
	},
	components: {
		topSearch,
		articleList
	},
	methods: {
		previewImage(banners,index) {
			uni.previewImage({
				urls:this.bannerImgs,
				current:index,
				loop:true
			})
		},
		init(){
			this.index_page = 0;
			this.total_page = 1;
			this.list = [
			]
		},
		setIndex(i){
			if(this.current_index !=i){
				this.current_index = i;
				this.second_index = 0;
				// const current_cate = this.cate_list[this.current_index]
				this.current_cate_id = this.cate_list[this.current_index].id
				this.init();
				this.eduList();
			}
			

		},
		//二级切换
		setSecondIndex(i){
			if(this.second_index !=i){
				this.second_index = i;
				const current_cate = this.cate_list[this.current_index].list;
				if(current_cate){
					this.current_cate_id = current_cate[this.second_index].id
					this.init();
					this.eduList();
				}
				
			}
		},
		banner() {
			getBanners({ num: 6, pos: 'jiaoyu' }).then(res => {
				if (res) {
					this.banners = res.data
					this.banners.forEach(item=>{
						this.bannerImgs.push(item.image)
					})
				}
			})
		},
		async getCate() {
			await eduCate().then(res => {
				console.log('eduCate',res)
				if (res) {
					res.forEach(item => {
						if(item.list){
							item.list.unshift({id:0,name:'全部'})
						}
					});
					this.cate_list = [...this.cate_list, ...res];
					this.cate_list.map(it=>{
						if(it.name=='0—1岁'){
							it.name="0-1岁"
						}
					})
				}
			})
		},
		eduList() {
			const _that = this
			//const current_cate = this.cate_list[this.current_index]
			getEduList({ page: this.index_page + 1,cate:this.current_cate_id }).then(res => {
				if (res) {
					_that.index_page = res.current_page
					_that.total_page = res.last_page
					_that.list = [..._that.list, ...res.data];
				}
			})
		}
	},
	
		//下拉刷新
	onPullDownRefresh(){
		this.init();
		this.eduList();
	},
	//上拉加载
	onReachBottom(){
		if(this.index_page < this.total_page){
			if(this.cate_list){
				this.eduList();
			}
		}
		
	},
	async onLoad() {
		this.banner()
		await this.getCate()
		if(this.cate_list){
			this.eduList();
		}
	}
	
}
</script>

<style scoped>
.banner-box {
	border-radius: 5px;
}
.banner {
	border-radius: 5px;
	max-height: 8.3em;
}
.banner-item {
	width: 100%;
	height: 100%;
	
	/* line-height: 120px; */
	border-radius: 5px;
	text-align: center;
	
}

.tab-bar {
	/* #ifdef APP-PLUS */
	width: 750rpx;
	/* #endif */
	flex-direction: row;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
}
/* #ifndef APP-NVUE */
.tab-bar ::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
/* #endif */
.tab-bar-line {
	height: 1px;
	background-color: #cccccc;
}

.uni-tab-item {
	margin-top: 10px;
	/* #ifndef APP-PLUS */
	display: inline-block;
	/* #endif */
	flex-wrap: nowrap;
	/* padding-left: 10px;
	padding-right: 10px; */
	padding: 12rpx 26rpx;
}

.uni-tab-item-title {
	color: #555;
	font-size: 0.83em;
	flex-wrap: nowrap;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
}

.uni-tab-item .active {
	color: #0088ff !important;
	font-size: 0.89em;
	font-weight: 600;
}

.header-top {
	width: 100%;
	padding: 15px 0px;
	max-height: 3.06em;
}
.header-top .active {
	color: #0088ff !important;
}
</style>
